tesseract/showcases/web-kitchensink-reactnext/src/pages/[...url].tsx

import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
import * as fs from 'fs/promises';
import * as path from 'path';
import * as React from 'react'
import {useRouter} from 'next/router';
import ReactMarkdown from 'react-markdown';
import {DocsLayout, Page} from '@/components/DocsLayout';
import {getDocs, getPlatforms} from '@/utils/data';

export interface Props {
  componentPages: { name: string; components: Page[] }[],
  docsPages: Page[],
  examplePages: Page[],
  markdown: string,
  platforms: string,
  platform: string,
  framework: string,
}

const InnerPage: NextPage<Props> = ({
  componentPages,
  examplePages,
  docsPages,
  markdown,
  platforms,
  platform,
  framework,
}) => {
  const router = useRouter();
  const sidebarOpen = router.query.open === 'sidebar';

  return (
    <DocsLayout
      componentPages={componentPages}
      examplePages={examplePages}
      docsPages={docsPages}
      platforms={platforms}
      currentPlatform={framework}
      currentVersion="0.1.0"
      sidebarOpen={sidebarOpen}
    >
      {markdown && (
        <ReactMarkdown
          className="my-12 leading-loose"
          components={{
            ul: ({node, ordered: _ordered, ...props}) => (
              <ul
                {...props}
                className="list-disc pl-4"
              />
            ),
            li: ({node, ...props}) => (
              <li
                {...props}
                className="list-item pl-4"
              />
            ),
          }}
        >
          {markdown}
        </ReactMarkdown>
      )}
      <pre>
        <code>
          {JSON.stringify(componentPages, null, 2)}
        </code>
      </pre>
    </DocsLayout>
  )
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const { params } = ctx;
  const { url } = params as { url: string[] };
  const [platform, framework, ...etcUrl] = url;

  const props = {} as Record<string, unknown>;
  props.platform = platform;
  props.framework = framework;

  props.docsPages = await getDocs({
    deriveHrefFromFilename: d => `/docs/${
      d
        .replace(/\.md/i, '')
        .split('-')
        .slice(1)
        .join('-')
    }`,
    deriveLabelFromFilename: d => (
      d
        .split('-')
        .slice(1)
        .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
        .join(' ')
        .replace(/\.md/i, '')
    ),
  });
  props.platforms = await getPlatforms();

  // const categoriesPath = path.resolve('../../categories');
  // const categories = await fs.readdir(categoriesPath);
  // props.componentPages = categories.map((c) => ({
  //   id: c,
  //   href: `/categories/${c}`,
  //   label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
  // }));

  // const pagesPath = path.resolve('src/pages');
  // const examplesPath = path.resolve(pagesPath, 'examples');
  // const examplesRaw = await fs.readdir(examplesPath);
  // const examplesIndexPage = await Promise.all(
  //   examplesRaw.map(async (c) => {
  //     const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
  //     try {
  //       const statResult = await fs.stat(indexPath);
  //       return [c, statResult.isFile()];
  //     } catch {
  //       // noop
  //     }
  //
  //     return [c, false];
  //   })
  // ) as [string, boolean][];
  // const examples = examplesIndexPage
  //   .filter(([, hasIndexPage]) => hasIndexPage)
  //   .map(([key]) => key);
  // props.examplePages = examples.map((e) => ({
  //   id: e,
  //   href: `/examples/${e}`,
  //   label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
  // }));

  // const typedocData = await fs.readFile('typedoc.data.json', 'utf-8');
  // const project = JSON.parse(typedocData) as any;
  //
  // props.componentPages = project.children.reduce(
  //   (theComponents, pkg) => {
  //     const packageNameFragments = pkg.name.split('-');
  //     const packageFramework = packageNameFragments.pop();
  //     const categoryBaseName = packageNameFragments.pop();
  //
  //     console.log(packageFramework, categoryBaseName);
  //
  //     if (theComponents.some((c) => c.name === categoryBaseName)) {
  //       return theComponents.map((cc) => {
  //         if (cc.name !== categoryBaseName) {
  //           return cc;
  //         }
  //
  //         let components = [];
  //         if (packageFramework === 'react') {
  //           components = pkg.children
  //             .filter((exported) => {
  //               return exported.kind === 64; // Function, these are react components
  //             })
  //             .map((component) => {
  //               return {
  //                 ...component,
  //                 id: component.name,
  //                 href: `/categories/${categoryBaseName}/${component.name}`,
  //                 label: component.name,
  //                 descriptionMarkdown: component.signatures[0].comment.summary.reduce(
  //                   (theText, t) => {
  //                     if (t.kind === 'text') {
  //                       return `${theText}${t.text}`;
  //                     }
  //                     if (t.kind === 'inline-tag' && t.tag === '@link') {
  //                       return `${theText}[${t.text}](#)` // TODO set URL
  //                     }
  //                     return theText;
  //                   },
  //                   ''
  //                 ),
  //               };
  //             });
  //         }
  //
  //         return {
  //           ...cc,
  //           name: categoryBaseName,
  //           packages: {
  //             ...(cc.packages ?? {}),
  //             [packageFramework]: {
  //               components,
  //             },
  //           },
  //         };
  //       })
  //     }
  //
  //     let components = [];
  //     if (packageFramework === 'react') {
  //       components = pkg.children
  //         .filter((exported) => {
  //           return exported.kind === 64; // Function, these are react components
  //         })
  //         .map((component) => {
  //           return {
  //             ...component,
  //             id: component.name,
  //             href: `/categories/${categoryBaseName}/${component.name}`,
  //             label: component.name,
  //             descriptionMarkdown: component.signatures[0].comment.summary.reduce(
  //               (theText, t) => {
  //                 if (t.kind === 'text') {
  //                   return `${theText}${t.text}`;
  //                 }
  //                 if (t.kind === 'inline-tag' && t.tag === '@link') {
  //                   return `${theText}[${t.text}](#)` // TODO set URL
  //                 }
  //                 return theText;
  //               },
  //               ''
  //             ),
  //           };
  //         });
  //     }
  //
  //     return [
  //       ...theComponents,
  //       {
  //         name: categoryBaseName,
  //         packages: {
  //           [packageFramework]: {
  //             components,
  //           }
  //         }
  //       }
  //     ]
  //   },
  //   [],
  // );

  return {
    props,
  };
};

export default InnerPage;

export const getStaticPaths: GetStaticPaths = async () => {
  const docsPath = path.resolve('../../docs');
  const docs = await fs.readdir(docsPath);

  const categoriesPath = path.resolve('../../categories');
  const categories = await fs.readdir(categoriesPath);

  return {
    paths: [
      ...docs.map((d) => `/docs/${d}`),
    ],
    fallback: true,
  };
};